<template>
	<view  class="uni-padding-wrap uni-common-mt">
		<uni-popup ref="popupMessage" type="message">
		    <uni-popup-message type="success" :message="message" :duration="700" />
		</uni-popup>
		<view class="uni-margin-wrap">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item class="swiper-item uni-bg-red" v-for="(bannerItem,index) in bannerList" :index="index" @tap="swiperClick(index)">
					<image class="swiper-image" :src="bannerItem.picUrl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view>
			<view class="button-bgview">
				<view class="button-item" v-for="(buttonItem,index) in buttonList" :index='index' @tap="buttonClick(index)">
					<image class="image" :src="buttonItem.url" mode="widthFix"></image>
					<text class="text">{{buttonItem.name}}</text>
				</view>
			</view>
		</view>
		
		<view v-for="(item,index) in classList" :index='index'>

			<view class="section">
				<view class="section-left">
					<view class="section-line"></view>
					<text class="section-title">{{item.name}}</text>
				</view>
				<view class="section-right" @click="goToMyCity">
					<text class="section-content">查看更多</text>
					<image class="section-image" src="/static/icon／16px／more@3x.png"></image>
				</view>
			</view>

			<view v-if="item.type==5">
				<view class="book-bgview">
					<view class="book-item" v-for="(bootItem,index) in item.list" :index='index' @tap='bookItemClick(index)'>
						<image class="book-image" :src="bootItem.url" mode="widthFix"></image>
						<view class="book-text">{{bootItem.name}}</view>
					</view>
				</view>
			</view>
			<view v-else-if="item.type==6">
				<view class="audition-bgview">
					<view class="audition-item" v-for="(auditionItem,index) in item.list" :index='index' @tap="classItemClick(index)">
						<image class="audition-image" :src="auditionItem.url" mode="widthFix"></image>
						<view class="audition-text">{{auditionItem.name}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="class-list">
					<view class="class-item" v-for="(classItem,index) in item.list" :index='index' @tap="classItemClick(index)">
						<image class="class-image" :src="classItem.url" mode="widthFix"></image>
						<view class="class-text">
							<text style="font-size: 20rpx;font-weight: bold;">{{classItem.name}}</text>
							<text style="margin-top: 10rpx;color: #666666;">{{classItem.subhead}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		
		
	</view>
</template>

<script>
	
	import { getIndex } from '@/common/api.js'
	
	
	export default {
		data() {
			return {
				message:'',
				bannerList:[],
				classList:[],
				buttonList:[
					{
						url:"/static/ButtonsImg/图书.png",
						name:"图书"
					},{
						url:"/static/ButtonsImg/我的课.png",
						name:"我的课"
					},{
						url:"/static/ButtonsImg/试听课.png",
						name:"试听课"
					},{
						url:"/static/ButtonsImg/推荐课.png",
						name:"推荐课"
					},{
						url:"/static/ButtonsImg/直播课.png",
						name:"直播课"
					},{
						url:"/static/ButtonsImg/图书服务.png",
						name:"图书服务"
					},{
						index:6,
						url:"/static/ButtonsImg/每日任务.png",
						name:"每日任务"
					},{
						url:"/static/ButtonsImg/在线刷题.png",
						name:"在线刷题"
					},{
						url:"/static/ButtonsImg/医学资讯.png",
						name:"医学资讯"
					},{
						url:"/static/ButtonsImg/正版验证.png",
						name:"正版验证"
					}
				]
			}
		},
		onLoad(){
			this.getData();
		},
		methods:{
			async getData(){
				var parmas = {
					majorId:1
				}
				
				const result = await getIndex(parmas)
				console.log(result);
				this.bannerList = result.banners;
				this.classList = result.classList;
				
				// const result = await this.$requestApi({
				// 	url:'coursePack/getIndex',
				// 	method:'GET',
				// 	data:{majorId:1}
				// })
				// this.bannerList = result.banners;
				// this.classList = result.classList;

			},
			buttonClick(index){
				this.message = '点击金刚区第'+index+'个按钮';
				this.$refs.popupMessage.open();
			},
			swiperClick(index){
				this.message = '点击banner区第'+index+'个轮播图';
				this.$refs.popupMessage.open();
			},
			bookItemClick(index){
				this.message = '点击书籍区第'+index+'个课程';
				this.$refs.popupMessage.open();
			},
			classItemClick(index){
				this.message = '点击课程区第'+index+'个课程';
				this.$refs.popupMessage.open();
			},
			moreInfo(type){
				this.message = '点击第'+type+'个分区';
				this.$refs.popupMessage.open();
			}
		}
	}
</script>

<style>
	.section{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 50px;
		background-color: white;
		align-items: center;
		justify-content: space-between;
	}
	
	.section-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.section-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.section-line{
		width: 2px;
		height: 15px;
		background-color: red;
		margin-left: 15px;
	}
	
	.section-title{
		margin-left: 10px;
		font-size: 16px;
		font-weight: 500;
		color: black;
	}
	
	.section-content{
		font-size: 14t;
		color: red;
	}
	
	.section-image{
		width: 16pt;
		height: 16pt;
		margin-right: 10rpx;
	}
	.audition-bgview{
		display: flex;
		flex-direction: row;
	}
	.audition-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 50%;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	.audition-image{
		width: 100%;
		margin-bottom: 5rpx;
		border-radius: 10rpx;
	}
	.audition-text{
		width: 100%;
		/* height: 20rpx; */
	}
	.swiper{
		height: 300rpx;
	}
	.swiper-item{
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		background-color: white;
		border-radius: 10rpx;
	}
	.swiper-image{
		flex: 1;
		border-radius: 10rpx;
		width: 100%;
		height: 100%;
	}
	.swiper-list{
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.button-bgview{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.button-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; 
		width: 20%;
		margin-top: 20rpx;
		/* padding: 20rpx; */
	}
	.image{
		width: 50%;
		/* padding: 15prx; */
	}
	.text {
		font-size: 14px;
		margin-top: 10rpx;
	}
	
	.class-list{
		flex: 1;
		flex-direction: column;
	}
	.class-item{
		display: flex;
		flex-direction: row;
		font-size: 24rpx;
		font-weight: bold;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		border-bottom: 2rpx #efefef solid;
	}
	.class-image{
		background-color: red;
		max-width: 30%;
		border-radius: 10rpx;
	}
	.class-text{
		flex: 1;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.book-bgview{
		display: flex;
		flex-direction: row;
	}
	.book-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-left: 10rpx;
		margin-right: 10rpx;
		width: 25%;
	}
	.book-image{
		width: 100%;
		align-content: flex-start;
		border-radius: 5rpx;
	}
	.boo-text{
		height: 20rpx;
	}
</style>